<template>
  <div class="HytReform">
    <div class="reformTit">
      <div class="item">
        <span class="grey">改革前</span>
      </div>
      <div class="item">
        <span class="powder">改革实践</span>
      </div>
      <div class="item">
        <span class="blue">改革成效</span>
      </div>
    </div>
    <div class="reformCont">
      <div class="item">
        <div class="box grey">
          <p><span>演员就业 <b>难</b></span></p>
          <p><span>参演率 <b>低</b></span></p>
          <p><span>参演率 <b>繁琐</b></span></p>
        </div>
      </div>
      <div class="item">
        <div class="box powder">
          <p class="tit">运用人才综合服务应用 <b>(横影通)</b> 打通线上流程，智能服务人员。</p>
          <p class="tit"><span>横影通<b class="red">注册11400余人，日活8000余人</b></span></p>
          <p class="tit"><span>认证影视工匠2400名</span></p>
          <p class="tit"><span>收到业务<b class="red">申请13900笔，办结11700笔</b></span></p>
        </div>
      </div>
      <div class="item">
        <div class="box blue">
          <p class="tit">自10月上线以来</p>
          <p class="tit"><span>参演流程<b class="red">减少80%</b></span></p>
          <p class="tit"><span>低频群演参演率<b class="red">提高50%</b></span></p>
        </div>
      </div>
    </div>
    <div class="reformCont">
      <div class="item">
        <div class="box grey">
          <p><span>场景供需 <b>矛盾大</b></span></p>
          <p><span>利用率 <b>低</b></span></p>
        </div>
      </div>
      <div class="item">
        <div class="box powder">
          <p class="tit">运用剧组综合服务管理应用 <b>(云勘景)</b><br/>颗粒化剧本，科学推送适合得场景，实现云上美工设计。</p>
          <p class="tit"><span>实现线上<b class="red">勘景1850次</b></span></p>
          <p class="tit"><span>转化实际场景<b class="red">安排83次</b></span></p>
        </div>
      </div>
      <div class="item">
        <div class="box blue">
          <p class="tit"><span>前期筹备时间<b class="red">缩短30%</b></span></p>
        </div>
      </div>
    </div>
    <div class="reformCont">
      <div class="item">
        <div class="box grey">
          <p><span>供应链 <b>缺乏</b> 交易平台</span></p>
          <p><span>企业投入 <b>成本高</b></span></p>
        </div>
      </div>
      <div class="item">
        <div class="box powder">
          <p class="tit">运用产业综合智治应用，相关配套数据，实现企业降本增效。</p>
          <p class="tit"><span>备案道具、车辆<b class="red">4500多项</b></span></p>
          <p class="tit"><span>转化实际场景<b class="red">安排83次</b></span></p>
        </div>
      </div>
      <div class="item">
        <div class="box blue">
          <p class="tit"><span>剧组拍摄成本<b class="red">降低10%</b></span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HytReform',
    components: {},
    data () {
      return {}
    },
    mounted () {
    },
    methods: {}
  }
</script>

<style scoped lang="less">
  .reformTit {
    display: grid;
    grid-template-columns: 22% 48% 30%;
    font-size: 18px;
    font-weight: bold; margin-top: 15px; margin-bottom: 10px;
    span {
      display: flex;  justify-content: center; align-items: center; align-content: center;
      margin: 0 10px; padding: 5px 12px; border-radius: 5px;
    }
    .grey {background: #e3e7ee;}
    .powder {background: #fdd8c7;}
    .blue {background: #c7dffd;}
  }
  .reformCont {
    display: grid;
    grid-template-columns: 22% 48% 30%;
    font-size: 18px; margin-top: 20px;
    .box {
      display: flex;  justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;
      padding: 15px 0;border-radius: 8px; text-align: center; margin: 0 10px;
      height: 100%;
      p { display: block; width: 100%; padding: 5px 20px; margin-bottom: 0;
        span {  width: 100%; display: block; margin: auto; padding: 5px 12px; border-radius: 5px;}
      }
    }
    .grey {  background: #f6f6f6;  border: 1px dashed #cecbcb;
      span {  background: #e3e7ee; }
    }
    .powder {
      background: #fdf2f2; border: 1px dashed #fdd8c7;
      span {background: #fdd8c7;}
      .red{ color: red; margin-left: 5px;}
    }
    .blue {
      background: #f2f5fd; border: 1px dashed #c7dffd;
      span {background: #c7dffd; }
      .red{ color: red; margin-left: 5px;}
    }
  }
</style>
